<div class="rights_box">
  <!-- 面包屑模块 -->
  <el-row>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类参数</el-breadcrumb-item>
    </el-breadcrumb>
  </el-row>

  <!-- 选择菜单 -->
  <el-row class="select_box">
    <el-cascader
      v-model="cateChecked"
      :options="cateList"
      :props="{ expandTrigger: 'hover', value: 'cat_id', label: 'cat_name' }"></el-cascader>
  </el-row>

  <!-- 选项卡 -->
  <el-row>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="动态参数" name="first">
        <!-- 动态参数内的布局 -->
        <el-row>
          <el-button type="success"> 添加参数分类 </el-button>
        </el-row>

        <el-row>
          <el-table
            :data="randerParamsInfoList"
            border
            style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="data">
                <!--
                  点击 tag 标签上的 关闭 按钮 触发删除一条信息的事件
                    + 请求:
                      => 本身的参数是 111, 222, 333
                      => 你传递的时候 111, 222
                      => 就相当于删除 333 这个参数信息
                -->
                <!-- 循环的内容不再使用原始数组了 -->
                <!-- 而是用计算属性得到一个新的值来实现 -->
                <el-tag
                  style="float: left;"
                  :key="item"
                  v-for="item in data.row.attr_vals"
                  @close="deleteInfoHandler(data.row.attr_vals, item, data.row.attr_name, data.row.attr_id)"
                  closable
                  :disable-transitions="false">
                  {{item}}
                </el-tag>
                <el-col :span="2">
                  <el-input
                    class="input-new-tag"
                    v-if="inputVisible"
                    v-model="addParamsInfo"
                    @keydown.enter.native="addParamsInfoHandler(data.row)"
                    ref="saveTagInput"
                    size="small">
                  </el-input>
                  <!--
                    点击 new Tag 按钮
                      + 需要让自己消失, input 显示
                      + 只要修改 inputVisible 信息即可
                  -->
                  <el-button @click="showAddTagHandler" v-else class="button-new-tag" size="small">+ New Tag</el-button>
                </el-col>
              </template>
            </el-table-column>
            <el-table-column
              label="序号"
              width="70"
              type="index">
            </el-table-column>
            <el-table-column
              label="商品参数名称"
              prop="attr_name">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="data">
                <el-tooltip class="item" effect="dark" content="编辑" placement="left">
                  <el-button icon="el-icon-edit" size="mini" type="success" circle></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除" placement="top">
                  <el-button icon="el-icon-delete" size="mini" type="danger" circle></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="静态参数" name="second">静态参数</el-tab-pane>
    </el-tabs>
  </el-row>
</div>
